<!-- 登录页面 -->
<template>
  <el-row class="login">
    <!-- 左半边的图片 -->
    <el-col :span="12" class="login-bg">
      <div class="logo">
        <img src="@/assets/img/logo.jpg" />
        <span>幼儿管理系统</span>
      </div>
    </el-col>

    <!-- 右半边的表单 -->
    <el-col :span="6" :offset="3" class="login-card">
      <el-form class="login-from" ref="from" size="large" :model="login" :rules="rules">
        <h2 class="w-[500px] text-center">登录</h2>
        <el-form-item prop="username">
          <el-input
            placeholder="请输入账号"
            v-model="login.username"
            prefix-icon="UserFilled"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="login.password"
            prefix-icon="Lock"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="login.remenber">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="loginBtn">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import message from "@/composable/ElMessage.ts";
import { login as loginApi } from "@/api/user/index";
import { useTokenStore } from "@/stores/token";
const tokenStore = useTokenStore();

// 登录与注册校验
const from = ref();

// 登录
const login = reactive({
  username: "",
  password: "",
  remenber: false,
});

// 配置注册规则
const rules = {
  username: [
    // 是否为空，提示信息，触发事件
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 11, max: 11, message: "请输入11位数字", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { pattern: /^\S{3,15}$/, message: "请输入3-15位非空字符", trigger: "blur" },
  ],
};

// 登录
const loginBtn = async () => {
  await from.value.validate();

  if (login.remenber) {
    sessionStorage.setItem("login", JSON.stringify(login));
  }

  //delete login.remenber;
  await loginApi(login).then((res: any) => {
    console.log(typeof res.code);
    if (res.code === "200") {
      sessionStorage.setItem("token", res.msg);
      tokenStore.setToken(res.msg);
      router.push("/");
      message.success("登录成功");
    } else {
      sessionStorage.removeItem("login");
      message.error("账号密码错误");
    }
  });
};
</script>

<style lang="scss" scoped>
@mixin dflex {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin fwidth {
  width: 500px;
}
.login {
  height: 100vh;
  width: 100vw;

  .login-bg {
    background: url("@/assets/img/bg1.jpg") no-repeat center / cover;
    border-radius: 0 20px 20px 0;

    .logo {
      margin: 3.125rem auto;
      @include dflex;

      img {
        border-radius: 20px;
        width: 150px;
        margin-right: 30px;
      }
      span {
        font-size: 40px;
      }
    }
  }

  .login-card {
    @include dflex;

    .login-from {
      @include fwidth;

      .login-btn {
        @include fwidth;
      }
    }
  }
}
</style>
